<template>
    <div class="hello">
        <div class="upload">
            <div class="upload_warp">
                <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" :useCustomSlot=true>
                    <div class="dropzone-custom-content">
                        <h3 class="dropzone-custom-title">将文件拖到此处</h3>
                        <div class="subtitle">或点击上传文件</div>
                    </div>
                </vue-dropzone>
            </div>
        </div>
    </div>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
  name: 'app',
  components: {
    vueDropzone: vue2Dropzone
  },
  data: function () {
    return {
      dropzoneOptions: {
          url: 'https://httpbin.org/post',
          thumbnailWidth: 150,
          headers: { "My-Awesome-Header": "header value" },
        //   previewTemplate: this.template(),  // 自定义文件上传后显示的样式
 
          paramName: "file", 
          maxFilesize: 2.0, // 上传的文件大小
          maxFiles:5,//一次性上传的文件数量上限
          // acceptedFiles: ".xls,.xlsx",  
          addRemoveLinks : true,//添加移除文件
          autoProcessQueue: true,//不自动上传
          dictCancelUploadConfirmation:'你确定要取消上传吗？',
          dictMaxFilesExceeded: "只能上传{{maxFiles}}个文件",
          dictFileTooBig:"文件过大({{filesize}}MB). 上传文件最大支持: {{maxFilesize}}MB.",
          dictDefaultMessage :
          '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> 拖动文件至该处</span> \
          <span class="smaller-80 grey"></span> <br /> \
          <i class="upload-icon icon-cloud-upload blue icon-3x"></i>',
          dictResponseError: '文件上传失败!',
          dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.xls/*.xlsx。",
          dictCancelUpload: "取消上传",
          dictCancelUploadConfirmation: "你确定要取消上传吗?",
          dictRemoveFile: "移除文件",
          uploadMultiple:false,
          init: function() {
              //上传文件时触发的事件
            this.on("addedfile", function(file) { 
              //浏览器控制台输出js
                  console.log("File " + file.name + "uploaded");
              });
            //上传文件成功时触发的事件
              this.on("success", function(file) {
                console.log("File " + file.name + "uploaded");
              });
            //移除文件触发的事件
              this.on("removedfile", function(file) {
                  console.log("File " + file.name + "removed");
              });
          }
      }
    }
  }
}
    
</script>

<style>
.upload {
    border: 1px solid #2196F3;
    /* background-color: #fff; */
    width: 100%;
    box-shadow: 0 0 10px #ddd;
}
.hello {
    padding: 30px;
    /* width: 200px; */
    /* margin-left: 3%; */
    text-align: center;
}
.upload_warp {
		  margin: 14px;
		  /* height: 130px; */
          width: 98%;
		  height: 100%;
		  border: 2px dashed #2196F3;
		  border-radius: 4px;
		  cursor: pointer;

}
</style>
